<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-gradual-green">
			<block slot="content">南风怡人</block>
		</cu-custom>
		<!-- #endif -->
		<view class="wrap">
			<view class="u-tabs-box ">
				<u-tabs-swiper
					ref="tabs" 
					active-color="#60BD45"
					:list="list"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
					bar-width="60"
				></u-tabs-swiper>
			</view>
			<u-gap height="80"></u-gap>
			<swiper class="swiper-box " :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view :refresher-threshold="100" @scrolltolower="reachBottom" @refresherrefresh ="reachTop"
					 :refresher-enabled="true" :refresher-triggered="refresherFlag" refresher-background="#F1F1F1" scroll-y style="height: 100%;width: 100%;" >
						<view class=" bg-white u-border-bottom margin-top u-skeleton">
							<view class="order padding yr-border-bottom" v-for="(item, index) in article.articleList" :key="item.id" @tap="toArticleDetail(item.id)">
								<view class="flex">
									<view class="padding-right-sm u-skeleton-fillet">
										<u-image width="180rpx" height="160rpx" border-radius="10rpx" :src="item.cover"></u-image>
									</view>
									<view class="flex flex-direction justify-between">
										<view class="u-skeleton-fillet">
											<view class="text-bold padding-bottom-xs u-skeleton-fillet">{{ item.title }}</view>
											<text class=" text-sm u-line-2 u-skeleton-fillet">{{ item.description }}</text>
										</view>
										<view class="flex justify-start align-center text-sm u-skeleton-fillet" >
											<view class="flex align-center padding-right-sm">
												<text class="cuIcon-calendar text-sm"></text>
												<text class="padding-left-xs">{{ $u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}</text>
											</view>
											<view class="flex align-center padding-right-sm">
												<text class="cuIcon-attention text-sm"></text>
												<text class="padding-left-xs">{{ item.readNum }}</text>
											</view>
											<view class="flex align-center">
												<text class="cuIcon-comment text-sm"></text>
												<text class="padding-left-xs">{{ item.commentSum }}</text>
											</view>
											<view class="flex   padding-left"  >
												<view v-for="(tag,i) in item.yrTags" v-if="i==0"  class="cu-tag light sm bg-gray radius" >{{tag.name}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="margin-tb">
							<u-loadmore icon-type="flower" :status="article.loadingStatus" bg-color="#F1F1F1" :load-text="loadText"/>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"  @scrolltolower="reachBottom" @refresherrefresh ="reachTop"
					 :refresher-enabled="true" :refresher-triggered="refresherFlag" refresher-background="#F1F1F1">
						<view class="page-box">
							<template v-for="item in novel.novelList" >
								<u-card
									:title="item.title"
									:sub-title="$u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd')"
									:key="item.id"
									@click="toNovelDetail(item.id)"
								>
									<view class="" slot="body" >
										<view class="u-body-item u-flex u-col-between u-p-t-0">
											<view class="u-line-2">{{ item.description }}</view>
										</view>
										<view class="u-body-item u-flex u-row-between margin-top-sm">
											<u-image width="630rpx" height="220rpx" :src="item.cover"></u-image>
										</view>
									</view>
									<view class="flex justify-between" slot="foot">
										<u-icon name="eye" size="34" color="" :label="item.readNum + ' 阅读'" class="margin-right"></u-icon>
										<u-icon name="chat" size="32" color="" :label="item.commentSum + ' 评论'"></u-icon>
									</view>
								</u-card>
							</template>
						</view>
						<view class="margin-tb">
							<u-loadmore icon-type="flower" :status="novel.loadingStatus" bg-color="#F1F1F1" :load-text="loadText"/>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"  @scrolltolower="reachBottom" @refresherrefresh ="reachTop"
					 :refresher-enabled="true" :refresher-triggered="refresherFlag" refresher-background="#F1F1F1">
						<view class="page-box yu-box ">
							<view class="poetry-box " v-for="item in poetry.poetryList" :key="item.id" >
								<u-card
									@click="toPoetryDetail(item.id)"
									:show-head="false"
									padding="0"
									margin="15rpx"
									box-shadow="0 0 0 2rpx rgba(0, 0, 0, 0.02), 0 8rpx 20rpx rgba(0, 0, 0, 0.06)"
								>
									<view class="" slot="body" style="padding: 0;" >
										<view class="u-body-item u-flex u-row-between u-p-t-0 "><u-image width="350rpx" height="360rpx" :src="item.cover"></u-image></view>
										<view class="u-body-item u-flex u-col-between  margin-sm ">
											<view class="u-body-item-title u-line-1 ">{{ item.title }}</view>
										</view>
									</view>
									<view class="flex justify-between padding-sm" slot="foot">
										<text>{{ $u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}</text>
										<text>{{ item.author }}</text>
									</view>
								</u-card>
							</view>
						</view>
						<view style="clear: both;"></view>
						<view class="margin-tb">
							<u-loadmore icon-type="flower" :status="poetry.loadingStatus" bg-color="#F1F1F1" :load-text="loadText"/>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '技术博客'
				},
				{
					name: '笑忘书集'
				},
				{
					name: '温其如玉'
				}
			],
			current: 0,
			swiperCurrent: 0,
			refresherFlag:false,
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			article: {
				total: 0,
				pages: 0,
				loadingStatus:'loadmore',
				queryParams: {
					current: 1,
					size: 10,
					params: {
						tagId: undefined,
						type: 1 //技术博客
					}
				},
				articleList: []
			},
			novel: {
				total: 0,
				pages: 0,
				loadingStatus:'loadmore',
				queryParams: {
					current: 1,
					size: 10,
					params: {
						tagId: undefined,
						type: 2 //小碗书记
					}
				},
				novelList: []
			},
			poetry: {
				total: 0,
				pages: 0,
				loadingStatus:'loadmore',
				queryParams: {
					current: 1,
					size: 12,
					params: {
						tagId: undefined,
						type: 3 //温其如玉
					}
				},
				poetryList: []
			}
		};
	},
	onLoad() {
		this.pageArticle();
		
		setTimeout(_=>{
			this.pageNovel();
			this.pagePoetry();
			this.accessLog();
		},500)
		
	},
	methods: {
		toArticleDetail(id) {
			this.addArticleReadNum(id);
			this.$u.route('pages/home/article_content/article_content', { id: id });
		},
		toNovelDetail(id) {
			this.addArticleReadNum(id);
			this.$u.route('pages/home/novel_content/novel_content', { id: id });
		},
		toPoetryDetail(id) {
			this.addArticleReadNum(id);
			this.$u.route('pages/home/poetry_content/poetry_content', { id: id });
		},
		pageArticle() {
			this.article.loadingStatus = 'loading';
			this.$u.api.pageArticle(this.article.queryParams).then(res => {
				if (this.article.queryParams.current == 1) {
					this.article.articleList = [];
				}
				this.article.articleList = this.article.articleList.concat(res.data.records);
				this.article.total = res.data.total;
				this.article.pages = res.data.pages;
				this.refresherFlag = false;
				if(this.article.pages<=this.article.queryParams.current){
					this.article.loadingStatus = 'nomore';
				}else{
					this.article.loadingStatus = 'loadmore';
				}
			});
		},
		pageNovel() {
			this.novel.loadingStatus = 'loading';
			this.$u.api.pageArticle(this.novel.queryParams).then(res => {
				if (this.novel.queryParams.current == 1) {
					this.novel.novelList = [];
				}
				this.novel.novelList = this.novel.novelList.concat(res.data.records);
				this.novel.total = res.data.total;
				this.novel.pages = res.data.pages;
				this.refresherFlag = false;
				if(this.novel.pages<=this.novel.queryParams.current){
					this.novel.loadingStatus = 'nomore';
				}else{
					this.novel.loadingStatus = 'loadmore';
				}
			});
		},
		pagePoetry() {
			this.poetry.loadingStatus = 'loading';
			this.$u.api.pageArticle(this.poetry.queryParams).then(res => {
				if (this.poetry.queryParams.current == 1) {
					this.poetry.poetryList = [];
				}
				this.poetry.poetryList = this.poetry.poetryList.concat(res.data.records);
				console.log(this.poetry.poetryList);
				this.poetry.total = res.data.total;
				this.poetry.pages = res.data.pages;
				this.refresherFlag = false;
				if(this.poetry.pages<=this.poetry.queryParams.current){
					this.poetry.loadingStatus = 'nomore';
				}else{
					this.poetry.loadingStatus = 'loadmore';
				}
			});
		},
		accessLog(){
			this.$u.api.addAccessLog();
		},
		addArticleReadNum(id){
			this.$u.api.addArticleReadNum(id);
		},
		reachBottom() {
			if (this.current == 0) {
				this.article.queryParams.current++;
				this.pageArticle();
			}
			if (this.current == 1) {
				this.novel.queryParams.current++;
				this.pageNovel();
			}
			if (this.current == 2) {
				this.poetry.queryParams.current++;
				this.pagePoetry();
			}
		},
		reachTop(event){
			this.refresherFlag = 'triggered';
			if (this.current == 0) {
				this.article.queryParams.current=1;
				this.pageArticle();
			}
			if (this.current == 1) {
				this.novel.queryParams.current=1;
				this.pageNovel();
			}
			if (this.current == 2) {
				this.poetry.queryParams.current=1;
				this.pagePoetry();
			}
		},
		// 页面数据
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style lang="stylus" scoped>
.u-tabs-box
	position fixed
	width 100%
	z-index 99999
.status_bar
	height var(--status-bar-height)
	width 100%
	background-color #fff
	.top_view
		height var(--status-bar-height)
		width 100%
		position fixed
		background-color #fff
		top 0
		z-index 999
.yu-box
	padding 15rpx
	display flex
	flex-wrap wrap 
	.poetry-box
		width 50%
		.u-card__head
			padding 0 !important
.wrap
	display flex
	flex-direction column
	height calc(100vh - 120rpx)
	width 100%
.swiper-box
	flex 1
.swiper-item
	height 100%
.u-body-item-title
	font-weight 500
</style>
